<!doctype html>
<html lang="en">
<head>
    <title>Carousel - Content</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Overview" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijtree.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijcarousel.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijcarousel.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijcarousel").wijcarousel();
        });
    </script>
    <style type="text/css">
        #wijcarousel
        {
            width: 680px;
            height: 195px;
        }
        
        #wijcarousel img
        {
            float: left;
            background: #fafafa;
            border: solid 1px #999DB2;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding: 5px;
            margin: 0 1em 0 0;
        }
        #wijcarousel li
        {
            padding: 1em 2em;
        }
        #wijcarousel .image-shadow
        {
            float: left;
            padding-bottom: 9px;
        }
        #wijcarousel p
        {
            font-style: italic;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Text Content</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div>
                <div id="wijcarousel" class="ui-corner-all ui-widget-content">
                    <ul>
                        <li>
                            <div class="image-shadow">
                                <img src="http://lorempixum.com/200/150/city/1" alt="City 1" />
                            </div>
                            <h3>
                                Lorem Ipsum</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida, justo
                                in fringilla cursus, dui orci ornare augue, at placerat odio lectus vitae lorem.
                                Duis consequat mauris erat, vel vulputate velit. </p>
                        </li>
                        <li>
                            <div class="image-shadow">
                               <img src="http://lorempixum.com/200/150/city/2" alt="City 2" />
                            </div>
                            <h3>
                                Vestibulum</h3>
                            <p>
                                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
                                Curae; Integer lobortis venenatis porttitor. Phasellus semper orci vel nibh aliquam
                                sed tempor felis cursus.</p>
                        </li>
                        <li>
                            <div class="image-shadow">
                                <img src="http://lorempixum.com/200/150/city/3" alt="City 3" />
                            </div>
                            <h3>
                                Phasellus</h3>
                            <p>
                                Phasellus ornare nulla quis tellus euismod sit amet tincidunt nulla tincidunt. In
                                hac habitasse platea dictumst. Integer et eros in quam mollis tempor. Duis facilisis
                                vestibulum arcu.</p>
                        </li>
                        <li>
                            <div class="image-shadow">
                                <img src="http://lorempixum.com/200/150/city/4" alt="City 4" />
                            </div>
                            <h3>
                                Venenatis</h3>
                            <p>
                                Vestibulum venenatis faucibus eros, vitae vulputate ipsum tempor ut. Donec ut ligula
                                a metus volutpat sagittis. Duis sodales, lorem nec suscipit imperdiet, sapien metus
                                tempor nibh, dapibus pulvinar lorem lacus molestie lacus.
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
        <p>This sample demonstrates how you can show text content, along with images, in a wijcarousel widget.</p>
        </div>
    </div>
</body>
</html>
